<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-row type="flex" justify="space-between" align="middle">
          <span style="font-size: 12px; color: pink;">说明：目前支持学科和关键字条件筛选</span>
          <el-button type="success" size="small" class="el-icon-edit" @click="addQuestions"> 新增试题</el-button>
        </el-row>
        <el-form ref="subjectRef" label-width="80px" style="margin-top: 20px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科" size="small">
                <el-select style="width: 100%" v-model="subjectForm.sub" placeholder="请选择" @change="changeHandel">
                  <el-option
                    v-for="item in subjectList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录" size="small">
                <el-select style="width: 100%" v-model="subjectForm.level" placeholder="请选择">
                  <el-option
                    v-for="item in twoLevel"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签" size="small">
                <el-select style="width: 100%" v-model="subjectForm.tags" placeholder="请选择">
                  <el-option
                    v-for="item in tagsList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字" size="small" >
                <el-input v-model="subjectForm.keywords" placeholder="根据题干搜索"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="试题类型" size="small">
               <el-select style="width: 100%" v-model="subjectForm.type" placeholder="请选择">
                  <el-option
                    v-for="item in titleList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度" size="small">
               <el-select style="width: 100%" v-model="subjectForm.diffcultly" placeholder="请选择">
                  <el-option
                    v-for="item in diffcultList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向" size="small">
               <el-select style="width: 100%" v-model="subjectForm.direction" placeholder="请选择">
                  <el-option
                    v-for="item in directionList"
                    :key="item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
             <el-form-item label="录入人" size="small">
               <el-select style="width: 100%" v-model="subjectForm.author" placeholder="请选择">
                  <el-option
                    v-for="item in authorList"
                    :key="item.id"
                    :label="item.username"
                    :value="item.username">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="题目备注" size="small">
                <el-input  v-model="subjectForm.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称" size="small" >
                <el-input v-model="subjectForm.abbreviation"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市" size="small">
                <el-select
                style="width: 48%; margin-right: 2%"
                v-model="subjectForm.city.citys"
                placeholder="请选择"
                @change="changeCity"
                >
                  <el-option
                    v-for="item in cityList"
                    :key="item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
                <el-select style="width: 50%" v-model="subjectForm.city.arears" placeholder="请选择">
                  <el-option
                    v-for="item in arearList"
                    :key="item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item size="small" style="text-align: right">
                <el-button type="default" @click="reset">清除</el-button>
                <el-button type="primary" @click="search">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template>
          <el-tabs v-model="tabName" type="card" @tab-click="tabHandleClick">
            <el-tab-pane label="全部" name="all"></el-tab-pane>
            <el-tab-pane label="待审核" name="1"></el-tab-pane>
            <el-tab-pane label="已审核" name="2"></el-tab-pane>
            <el-tab-pane label="已拒绝" name="3"></el-tab-pane>
          </el-tabs>
        </template>
        <el-alert type="info" :closable="false" class="el-icon-info">
          数据一共 {{ total }} 条
        </el-alert>
        <el-table :data="questionList" style="width: 100%; margin-top: 15px">
          <el-table-column prop="number" label="试题编号" width="120">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="120">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="120">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="120">
            <template #default="{ row }">
              {{ questionType[row.questionType] }}
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干" width="280">
            <template #default="{ row }">
              <p v-html="row.question">{{ row.question }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="180">
            <template #default="{ row }">
              {{ formatDate(row.addDate) }}
            </template>
          </el-table-column>
           <el-table-column prop="difficulty" label="难度" width="120">
            <template #default="{ row }">
              {{ difficulty[row.difficulty] }}
            </template>
          </el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="80">
            <template #default="{ row }">
              {{ chkState[row.chkState] }}
            </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="120">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="120">
          </el-table-column>
          <el-table-column prop="publishState" label="发布状态" width="150">
            <template #default="{ row }">
              {{ publishType[row.publishState] }}
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="200">
            <template #default="{ row }">
              <el-button type="text" size="small" @click="showDialog(row.id)">预览</el-button>
              <el-button type="text" size="small" :disabled="row.chkState === 1" @click="showCkDialog(row.id)">审核</el-button>
              <el-button type="text" size="small" @click="updateQuestion(row.id)" :disabled="row.publishState === 3 ">修改</el-button>
              <el-button type="text" size="small" @click="updatePublishState(row)">{{row.publishState === 0 ? '上架' : '下架'}}</el-button>
              <el-button type="text" size="small" @click="delQuestion(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end" align="middle" style="height: 60px">
          <el-pagination
            background
            :current-page="params.page"
            @size-change="handleSizeChange"
            :page-size="params.pagesize"
            :page-sizes="[5, 10, 20, 50]"
            layout="prev, pager, next, sizes, jumper"
            :total="total"
            @current-change="handleCurrentChange">
          </el-pagination>
        </el-row>
      </el-card>
    </div>
    <questions-preview
      :dialogVisible="dialogVisible"
      @close-dialog="closeDialog"
      :questionType="questionType"
      :chkState="chkState"
      :difficulty="difficulty"
      :quesID="id"
    >
    </questions-preview>
    <questions-check
      :ckDialogVisible="ckDialogVisible"
      @close-ck-dialog="closeCkDialog"
      :chkID="chkID"
      :chkState="chkState"
      @fetch-questions-list="fetchQuestionList"
    ></questions-check>
  </div>
</template>

<script>
import { simple as getSampleSubject } from '@/api/hmmm/subjects'
import { simple as getSampleDirectory } from '@/api/hmmm/directorys'
import { simple as getTags } from '@/api/hmmm/tags'
import { questionType, direction, difficulty } from '@/api/hmmm/constants'
import { list as getUserList } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import { choice as getQuestionList, remove as deleteQuestion, choicePublish as upDownPublish } from '@/api/hmmm/questions'
import dayjs from 'dayjs'
import QuestionsPreview from '@/module-hmmm/components/questions-preview'
import QuestionsCheck from '@/module-hmmm/components/questions-check'

export default {
  components: {
    QuestionsPreview,
    QuestionsCheck
  },
  data () {
    return {
      // 控制预览弹窗的显示和隐藏
      dialogVisible: false,
      id: 0,
      // 控制审核弹窗的显示和隐藏
      ckDialogVisible: false,
      chkID: 0,
      subjectForm: {
        // 学科
        sub: '',
        // 二级目录
        level: '',
        // 标签
        tags: '',
        // 关键字
        keywords: '',
        // 试题类型
        type: '',
        // 难度
        diffcultly: '',
        // 方向
        direction: '',
        // 录入人
        author: '',
        // 备注
        remarks: '',
        // 企业简称
        abbreviation: '',
        // 城市
        city: {
          citys: '',
          arears: ''
        }
      },
      // 学科列表数据
      subjectList: [],
      // 二级目录列表数据
      twoLevel: [],
      // 标签列表数据
      tagsList: [],
      // 试题类型数据
      titleList: [],
      // 难度数据
      diffcultList: [],
      // 方向数据
      directionList: [],
      // 录入人数据
      authorList: [],
      // 城市列表数据
      cityList: [],
      // 区县列表数据
      arearList: [],
      // tab默认选中
      tabName: 'all',
      // tab对应状态
      State: null,
      // 试题库
      questionList: [],
      params: {
        page: 1,
        pagesize: 5
      },
      total: 0,
      // 试题类型枚举值
      questionType: {
        1: '单选',
        2: '多选',
        3: '简单'
      },
      // 难度枚举值
      difficulty: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      // 审核状态枚举值
      chkState: {
        0: '待审核',
        1: '通过',
        2: '拒绝'
      },
      // 发布状态枚举值
      publishType: {
        0: '待发布',
        1: '已发布',
        2: '已下架'
      }
    }
  },
  async created () {
    this.fetchSampleList()
    this.titleList = questionType
    this.diffcultList = difficulty
    this.directionList = direction
    this.fetchUserList()
    this.fetchCitys()
    this.fetchQuestionList()
  },
  methods: {
    // 格式化时间
    formatDate (value) {
      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    },
    // 学科数据框发生改变执行
    changeHandel () {
      this.fetchSampleDirectory()
      this.fetchTags()
    },
    // 市区联动
    async changeCity () {
      const res = await citys(this.subjectForm.city.citys)
      console.log(res)
      this.arearList = res
    },
    async fetchSampleList () {
      const res = await getSampleSubject()
      console.log(res)
      this.subjectList = res.data
    },
    async fetchSampleDirectory () {
      const res = await getSampleDirectory({
        subjectID: this.subjectForm.sub
      })
      // console.log('目录结构', res1)
      this.twoLevel = res.data
    },
    async fetchTags () {
      const res = await getTags({
        subjectID: this.subjectForm.sub
      })
      // console.log('标签数据', res2)
      this.tagsList = res.data
    },
    async fetchUserList () {
      const res = await getUserList()
      console.log('录入人数据：', res)
      this.authorList = res.data.list
    },
    async fetchCitys () {
      const res = await provinces()
      // console.log('城市数据：', res)
      this.cityList = res
    },
    async fetchQuestionList () {
      const res = await getQuestionList({
        page: this.params.page,
        pagesize: this.params.pagesize,
        chkState: this.State
        // subjectID: this.subjectForm.sub,
        // keyword: this.subjectForm.keyword
      })
      console.log('题库列表', res)
      this.questionList = res.data.items
      this.total = res.data.counts
    },
    reset () {
      this.subjectForm = {
        sub: '',
        level: '',
        tags: '',
        keywords: '',
        type: '',
        diffcultly: '',
        direction: '',
        author: '',
        remarks: '',
        abbreviation: '',
        city: {
          citys: '',
          arears: ''
        }
      }
      // this.$refs.subjectRef.resetFields()
    },
    search () {
      console.log(111)
    },
    addQuestions () {
      // console.log(this.$router)
      this.$router.push({
        path: 'new'
      })
    },
    async tabHandleClick (tab, e) {
      if (this.tabName === 'all') {
        this.State = null
        this.fetchQuestionList()
      } else {
        this.State = Number(this.tabName)
        this.params.page = 1
        this.fetchQuestionList()
      }
    },
    handleCurrentChange (newPage) {
      // console.log(111)
      this.params.page = newPage
      this.fetchQuestionList()
    },
    handleSizeChange (val) {
      this.params.pagesize = val
      this.fetchQuestionList()
    },
    // 预览的弹窗
    showDialog (id) {
      this.dialogVisible = true
      this.id = id
    },
    closeDialog () {
      this.dialogVisible = false
    },
    // 审核的弹窗
    closeCkDialog () {
      this.ckDialogVisible = false
    },
    showCkDialog (id) {
      this.ckDialogVisible = true
      this.chkID = id
    },
    // 修改
    updateQuestion (id) {
      this.$router.push({
        path: 'new',
        query: {
          id
        }
      })
    },
    delQuestion (id) {
      // 1. 询问用户
      this.$confirm('此操作将永久删除该问题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 2. 调用接口
        await deleteQuestion({
          id
        })
        // 3. 提示用户
        this.$message.success('删除成功')
        // 4. 刷新列表
        this.fetchQuestionList()
      })
    },
    // 修改改变发布状态
    updatePublishState (data) {
      this.$confirm(`你确定${data.publishState === 1 ? '下架' : '上架'}这道题吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          // 判断是否通过审核
          if (data.chkState === 1) {
            // 通过审核  调用接口
            await upDownPublish({
              id: data.id,
              publishState: data.publishState === 0 ? 0 : 1
            })
            // 刷新列表
            this.fetchQuestionList()
            // 提示用户
            this.$message.success(`${data.publishState === 1 ? '下架' : '上架'}成功`)
          } else {
            // 没审核得拦截
            this.$message.warning('请先通过审核')
          }
        } catch (err) {
          console.log(err)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    }
  }
}
</script>

<style scoped></style>
